<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WRPlayer 原生 HTML 示例 (UMD)</title>
    <style>
        body { font-family: Arial, Helvetica, sans-serif; margin: 20px; }
        .controls { margin-bottom: 10px; }
        .controls input { width: 600px; padding: 6px; }
        .controls button { padding: 6px 12px; margin-left: 8px; }
        video { width: 800px; height: 450px; background: #000; display: block; }
        .logs { margin-top: 10px; padding: 8px; background: #fafafa; border: 1px solid #ddd; height: 180px; overflow: auto; font-family: monospace; font-size: 12px; }
        .play { background: #2563eb; color: #fff; border: none; }
        .stop { background: #ef4444; color: #fff; border: none; }
    </style>
</head>
<body>
    <h1>WRPlayer 原生 HTML 示例 (UMD)</h1>
    <p>这是一个通过 UMD 包在纯 HTML 环境下使用 WRPlayer 的示例。</p>

    <div class="controls">
        <input type="text" id="urlInput" value="http://222.222.25.198:6080/index/api/webrtc?app=rtp&stream=34020000001320000001_34020000001320000001&type=play&originTypeStr=rtp_push">
        <button id="playBtn" class="play">播放</button>
        <button id="stopBtn" class="stop">停止</button>
    </div>

    <video id="videoElement" controls autoplay muted></video>

    <h2>事件日志</h2>
    <div id="logs" class="logs"></div>

    
    <!-- 1) 直接引入 WRPlayer 源码（ES Module），内部会按相对路径导入 core/ZLMRTCClient.js -->
    <!-- <script src="../../core/ZLMRTCClient-v1.1.2.js"></script>
    <script type="module" src="../../core/WRPlayer.js"></script> -->
    <script src="../../dist/wrplayer.umd.js"></script>

    <!-- 2. 编写播放器逻辑 -->
    <script>
        const videoElement = document.getElementById('videoElement');
        const urlInput = document.getElementById('urlInput');
        const playBtn = document.getElementById('playBtn');
        const stopBtn = document.getElementById('stopBtn');
        const logsContainer = document.getElementById('logs');
        
        let player = null;

        function addLog(message) {
            const time = new Date().toLocaleTimeString();
            const line = document.createElement('div');
            line.textContent = `[${time}] ${message}`;
            logsContainer.appendChild(line);
            logsContainer.scrollTop = logsContainer.scrollHeight;
        }

        playBtn.addEventListener('click', () => {
            if (player) {
                try { player.stop(); } catch (_) {}
                player = null;
            }
            const url = urlInput.value;
            if (!url) {
                addLog('错误: 请输入 URL');
                return;
            }

            addLog(`正在初始化播放器, URL: ${url}`);

            // 使用 WRPlayer（统一封装），同时显式传参稳定协商形态
            try {
                videoElement.muted = true; // 确保自动播放不被拦截
                player = new WRPlayer({
                    element: videoElement,
                    url,
                    type: 'webrtc',
                    autoplay: true,
                    debug: true,
                    // 关键：让首个 offer 始终包含音频 m-line，占位对齐，避免服务端偶发新增/重排
                    recvAudio: true,
                    recvVideo: true,
                    webrtcConfig: {
                        simulcast: false,
                        recvOnly: true,
                        audioEnable: true,
                        videoEnable: true,
                        usedatachannel: false
                    }
                });

                player.on('ready', () => addLog('播放器准备就绪'));
                player.on('play', () => addLog('播放开始'));
                player.on('pause', () => addLog('播放暂停'));
                player.on('ended', () => addLog('播放结束'));
                player.on('error', (err) => addLog(`错误: ${JSON.stringify(err)}`));
                player.on('connectionstatechange', (data) => addLog(`连接状态: ${data.state}`));
            } catch (err) {
                addLog(`初始化错误: ${err?.message || err}`);
            }
        });

        stopBtn.addEventListener('click', () => {
            if (player) {
                try { player.stop(); } catch (_) {}
                player = null;
                addLog('播放已停止');
                videoElement.src = '';
                videoElement.load();
            }
        });
    </script>
</body>
</html> 